<#include "../common/_layout.html" />
<@layout>
    <script src="assets/Highcharts/js/highcharts.js"></script>
    <script src="assets/Highcharts/js/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var chart;

            document.onkeydown=nextpage
                var prevpage="${baseUrl}problem/status/${prevPid!}"
                var nextpage="${baseUrl}problem/status/${nextPid!}"
                function nextpage(event)
                {
                    event=event?event:(window.event?window.event:null);
                    <#if prevPid!=pid>if(event.keyCode==37)location=prevpage;</#if>
                    <#if nextPid!=pid>if(event.keyCode==39)location=nextpage;</#if>
                }

            $(document).ready(function () {
                
                // Build the chart
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: '<a href="${baseUrl!'/'}problem/show/${pid!}" title="view the problem">Problem ${pid!} Statistics</a>'
                    },
        			subtitle: {
            			text: 'Power OJ'
        			},
                    tooltip: {
                       
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Count',
                        data: [
                            <#if resultList??>
                            <#list resultList as Result>
                            {
                                name: '${Result.longName!}',
                                color: $('td#${Result.name!}').css('color'),
                                y: ${Result.count!}
                            },
                            </#list>
                            </#if>
                            
                        ]
                    }]
                });
            });
            
        });
    </script>

    <div class="row" id="problem-status">
        <div class="span4">
            <h4>Statistics</h4>
            <table id="problem-status" class="table table-hover table-condensed table-bordered">
                <tbody>
                    <tr>
                        <td>Total Submissions</td><td><a href="status?pid=${pid!}">${problem.submit!}</a></td>
                    </tr>
                    <tr>
                        <td>Users (Submitted)</td><td>${problem.submit_user}</td>
                    </tr>
                    <tr>
                        <td>Users (Solved)</td><td>${problem.solved}</td>
                    </tr>
                    <#if resultList??>
                    <#list resultList as Result>
                    <tr>
                        <td id="${Result.name!}">${Result.longName!}</td><td><a href="status?pid=${pid!}&result=${Result.result!}">${Result.count!}</a></td>
                    </tr>
                    </#list>
                    </#if>
                </tbody>
            </table>
            <div id="container" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
        </div>

        <div class="span8" id="ajax-container">
            <h4>Best solutions of Problem <a href="problem/show/${pid!}" data-toggle="tooltip" title="${problem.title!}">${pid!}</a></h4>
        <div class="pull-left ajax-loader">
            <a url="problem/status/${pid!}<#if solutionList.pageSize!=20>?s=${solutionList.pageSize}</#if>" class="btn-link btn-info ajax-loader<#if !language?? || language==-1> active</#if>">All</a>
            <#if program_languages??>
                <#list program_languages as Language>
                <a url="problem/status/${pid!}<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if>?language=${Language.id!}" class="btn-link btn-info ajax-loader<#if language?? && language==Language.id> active</#if>" type="a">${Language.name!}</a>
                </#list>
            </#if>
        </div>
        <div class="pull-right">
            <span class="badge badge-info">${solutionList.pageNumber}/${solutionList.totalPage} Pages</span>
            <span class="badge badge-info">${solutionList.totalRow} Records</span>
        </div>
        <table id="problem-status" class="table table-hover table-condensed">
            <thead>
              <tr>
                <th>Rank</th>
                <th>Run ID</th>
                <th>User</th>
                <th>Time</th>
                <th>Memory</th>
                <th>Language</th>
                <th>Code Length</th>
                <th>Submit Time</th>
              </tr>
            </thead>
            <tbody>
            <#if solutionList??>
            <#list solutionList.list as solution>
            <tr>
                <td class="id">${solution_index+1+(solutionList.pageNumber-1)*solutionList.pageSize}</td>
                <td class="sid">${solution.sid!}</td>
                <td class="user"><a href="user/profile/${(solution.name)!}">${(solution.name)!}</a></td>
                <td class="time">${solution.time!0} MS</td>
                <td class="memory">${solution.memory!0} KB</td>
                <td class="language">
                    <#if userID?? &&(adminUser?? || userID==solution.uid)><a href="code/${solution.sid!}" target="blank" title="show source code"></#if>
                    ${solution.language!}
                    <#if userID?? &&(adminUser?? || userID==solution.uid)></a></#if>
                </td>
                <td class="code_len">${solution.code_len!}B</td>
                <td class="ctime">${solution.ctime!}</td>
            </tr>
            </#list>
            </#if>
            </tbody>
        </table>
        <div class="pagination pagination-centered ajax-loader">
        <ul>
            <li class="<#if solutionList.pageNumber==1>disabled</#if>"><a class="btn-link" url="problem/status/${pid!}?p=1<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if><#if query??>${query}</#if>">&lt;&lt;</a></li>
            <#if solutionList.pageNumber&gt;1><li><a class="btn-link" url="problem/status/${pid!}?p=${solutionList.pageNumber-1}<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if><#if query??>${query}</#if>">Prev</a></li></#if>
            <#if solutionList??>
            <#assign start=solutionList.pageNumber-3>
            <#assign end=solutionList.pageNumber+3>
            <#if start<1><#assign end=end-start+1><#assign start=1></#if>
            <#if end&gt;solutionList.totalPage ><#assign start=start-(end-solutionList.totalPage)-1><#if start<1><#assign start=1></#if><#assign end=solutionList.totalPage></#if>
            <#if end<start><#assign end=start></#if>
                <#list start..end as x>
                <li class="<#if x==solutionList.pageNumber>active</#if>"><a class="btn-link" url="problem/status/${pid!}?p=${x}<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if><#if query??>${query}</#if>">${x}</a></li>
                </#list>
            </#if>
            <#if solutionList.pageNumber<solutionList.totalPage><li><a class="btn-link" url="problem/status/${pid!}?p=${solutionList.pageNumber+1}<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if><#if query??>${query}</#if>">Next</a></li></#if>
            <li class="<#if solutionList.pageNumber&gt;=solutionList.totalPage>disabled</#if>"><a class="btn-link" url="problem/status/${pid!}?p=${solutionList.totalPage}<#if solutionList.pageSize!=20>&s=${solutionList.pageSize}</#if><#if query??>${query}</#if>">&gt;&gt;</a></li>
            </ul>
        </div>
        </div>
    </div>

    <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css">
    <script src="assets/tablecloth/js/jquery.metadata.js"></script>
    <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
    <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {

        $("table#problem-status").tablecloth({
          theme:"stats",
          condensed:true,
          sortable:true,
          striped:true,
          clean:true
        });

        $('div.ajax-loader a').click(function() {
            var url = '${baseUrl!}'+$(this).attr("url");
            if(url.indexOf('?')>0)
                url = url+'&ajax=1';
            else
                url = url+'?ajax=1';
            $('div#ajax-container').load(url);
        });
    });
    </script>

</@layout>